<template>
    <el-container>

        <el-main>
            <div class="manage">
                <div class="manage-tob">
                    <p>我的客户</p>
                    
                </div>
                <div class="manage-center">
                    <el-button type="text" @click="dialogFormVisible = true">新增</el-button>

                    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                        <el-form :model="form">
                            <el-form-item label="客户名称">
                                <el-input v-model="form.date" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号码">
                                <el-input v-model="form.province" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="addTodo()">添加</el-button>
                        </div>
                    </el-dialog>
                </div>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="date" label="客户名称" width="150">

                    </el-table-column>
                    <el-table-column prop="name" label="客户标签" width="200">
                    </el-table-column>
                    <el-table-column prop="province" label="手机号码" width="120">
                    </el-table-column>
                    <el-table-column prop="city" label="线索来源" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="意向车型" width="200">
                    </el-table-column>
                    <el-table-column prop="zip" label="跟进状态" width="120">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="150">
                        <template slot-scope="scope">
                            <div class="manage-bot">
                                <div>
                                    <el-button @click.native.prevent="bianji(scope.row)" type="text"
                                        size="small">编辑</el-button>
                                </div>
                                <div>
                                    <el-button type="text" @click="open(scope.row)">转移</el-button>
                                </div>
                                <div>
                                    <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small">
                                        移除
                                    </el-button>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                        layout=" prev, pager, next,sizes, jumper" :total="total">
                    </el-pagination>
                </div>

            </div>
        </el-main>

    </el-container>
</template>
  
<script>
// import { nanoid } from 'nanoid'

import { delManageList, getManageList, addManageList } from "@/api/index";

export default {
    name: "ManageUser",
    data() {
        return {
            currentPage: 1,
            total: 0,//总条数
            page: 1,//初始显示第几页
            pageSize: 5,//每页显示多少数据
            dialogVisible: false,
            dialogFormVisible: false,

            tableData: [],
            form: {
                id: '',
                date: '',
                name: '',
                province: '',
                city: '',
                address: '',
                zip: ''
            },
        }
    },


    methods: {
        async getManageListTotal() {
            const _data = await getManageList();
            const _res = await (_data).data;
            this.total = _res.length
            // console.log(_res);
        },

        // 获取数据
        async getManageList() {

            const _query = {
                _page: this.currentPage,
                _limit: this.pageSize
            }
            const _data = await getManageList(_query);
            const _res = await (_data).data;
            this.tableData = _res
            // console.log(this.tableData);
        },


        // 回车添加数据
        addTodo() {
            this.dialogFormVisible = false

            addManageList(this.form).then(() => {
                this.getManageList()
            })

            this.form = {
                id: '',
                date: '',
                name: '',
                province: '',
                city: '',
                address: '',
                zip: ''
            }
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.currentPage = 1
            this.getManageList()

            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.getManageList()
            console.log(`当前页: ${val}`);
        },


        deleteRow(row) {
            this.form = JSON.parse(JSON.stringify(row))
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                delManageList(this.form).then(() => {
                    this.getManageList()
                    this.getManageListTotal()
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
            })
                .catch(() => {
                });
        },


        open(row) {
            this.$prompt('转移给其他销售', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                // console.log(value);
                if (value == null) {
                    alert('请输入名字')
                } else {
                    this.$message({
                        type: 'success',
                        message: '已成功转移给: ' + value,
                    });


                    this.form = JSON.parse(JSON.stringify(row))
                    delManageList(this.form).then(() => {
                        this.getManageList()
                        this.getManageListTotal()

                    })



                }

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 编辑
        bianji(row) {   
            let id= row.id
            this.$router.push(`/detailuser?id=${id}`);
        },

    },
    mounted() {
        this.getManageListTotal()
        this.getManageList()




    },

}
</script>
<style  scoped>
.el-container {
    height: 100vh;
}

.el-header {
    background-color: #B3C0D1;
    color: #333;
    /* text-align: center; */
    /* line-height: 60px; */
}

.el-aside {
    background-color: #D3DCE6;
    color: #333;
    /* text-align: center; */
    /* line-height: 200px; */
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    /* line-height: 160px; */
}

body>.el-container {
    margin-bottom: 40px;
}

.manage-tob {
    display: flex;


}

.manage {
    background-color: #fff;
    padding: 15px;
}

.manage-tob>p {
    margin-left: 50px;
    margin-top: 20px;
}

.manage-center {
    text-align: left;
    margin: 30px 0;
}

.manage-center input {
    border: 0;
    outline: none;
    margin-left: 20px;
}

.manage-bot {
    display: flex;
    /* padding: 9px 15px; */
    /* font-size: 12px */
}

.manage-bot>div {
    margin: 0 5px;
    color: #409EFF;
    line-height: 50px;
}

.el-button--text {
    font-size: 14px;
}

.block {
    text-align: right;
    margin-top: 40px;
}
</style>